<template>
  <div class="warpper-box">
    <a-form layout="inline" :form="events_form">
      <a-form-item label="姓名/手机">
        <a-input placeholder="姓名/手机" v-decorator="['keyword']"></a-input>
      </a-form-item>
      <a-form-item label="渠道名称">
        <a-input placeholder="渠道名称" v-decorator="['channelName']"></a-input>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' @click="$refs.table.refresh(true)">查询</a-button>
        <a-button type='primary' @click="reset">重置</a-button>
        <a-button type='primary' @click="$refs.createInfo.add(true)">新增</a-button>
      </a-form-item>
    </a-form>
    <s-table showQuickJumper row-key="channelId" showPagination="auto" ref="table" size="default" :columns="columns" :data="loadData">
      <span slot="action" slot-scope="text, record">
        <a @click="$refs.createInfo.add(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
          <a>删除</a>
        </a-popconfirm>
        <a-divider type="vertical" />
        <a @click="openCooperate(record)">合作状态调整</a>
        <a-divider type="vertical" />
        <a @click="goCustom(record)">客户资源</a>
      </span>
    </s-table>
    <add-info ref="createInfo" @on-ok="addLoad" />
    <!-- 合作状态 -->
    <a-modal v-model="cooperateVisible" title="合作状态调整" @ok="editCooperate">
      <a-select v-model="cooperateStatus" style="width: 240px;">
        <a-select-option :key="1">
          待开始合作
        </a-select-option>
        <a-select-option :key="2">
          合作中
        </a-select-option>
        <a-select-option :key="3">
          合作暂停
        </a-select-option>
        <a-select-option :key="4">
          合作终止
        </a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import { getChannelPage, delChannel, localServiceCooperateStatusSet } from "@/api/human/canal"
import { COLUMNS_CANAL } from "./form"
import AddInfo from "./canal_add"
export default {
  name: 'canalList',
  components: {
    STable,
    AddInfo
  },
  data() {
    return {
      columns: COLUMNS_CANAL,
      loadData: parameter => {
        let formdata = this.events_form.getFieldsValue();
        return getChannelPage(Object.assign(parameter, formdata)).then(res => {
          return {
            pageNo: res.data.number,
            pageSize: res.data.size,
						showSizeChanger: true,
						showQuickJumper: true,
            totalCount: res.data.total,
            totalPage: Math.ceil(res.data.total / 10),
            data: res.data.content
          }
        })
      },
      cooperateVisible: false, // 合作状态开关
      channelId: '',
      cooperateStatus: 1,
    }
  },
  computed: {
    
  },
  filters: {
    
  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, { name: 'events_form' })
  },
  created() {
    
  },
  methods: {
    keyDown(e) {
      if (e.keyCode == 13) {
        this.$refs.table.refresh(true);
      }
    },
    async remove(item) {
      let params = { channelId: item.channelId }
      const { code } = await delChannel(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.$refs.table.refresh(true);
      }
    },
    // 打开合作状态
    openCooperate(rows) {
      this.cooperateVisible = true;
      this.cooperateStatus = rows.cooperateStatus;
      this.channelId = rows.channelId;
    },
    // 合作状态调整
    async editCooperate() {
      const {
        code
      } = await localServiceCooperateStatusSet({
        cooperateStatus: this.cooperateStatus,
        channelId: this.channelId
      });
      if (code == '1') {
        this.cooperateVisible = false;
        this.$message.success('操作成功');
        this.$refs.table.refresh(true);
      }
    },
    // 跳转客户资源
    goCustom(row) {
      this.$router.push({ name: 'humanResourcesPersonnelCanalCustomCode', query: { channelId: row.channelId } });
    },
    addLoad(state) {
      this.$refs.table.refresh(state);
    },
    reset() {
      this.events_form.resetFields();
      this.$refs.table.refresh(true);
    }
  }
}
</script>
